<template>
	 <div class="person_wapper_search"
    v-loading="loading" 
    element-loading-text="拼命加载中">
	 	<form-panel-more  class='form_more_wappers' :formData = 'formPanelMore' @do-search="handlerSearch"></form-panel-more>
		<div class="count">
      <span>共搜索到<em>{{counts.all}}</em>条数据</span>
	      <!-- <el-button
		        plain
		        size='mini'
		        style="margin-left:8px;"
		      >导出Excel
	      </el-button> -->
    </div>
    <table-panel class='table_wappers' :labelList='labelList' :tableData='tableData' :control='false'></table-panel>
    <div class="pagination">
      <el-pagination
        background
        layout="prev, pager,next, sizes,jumper"
        :page-sizes="[10, 20, 30]"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :page-size="pageSize"
        :current-page='pages'
        :total="counts.all"
        v-if="(counts.all / pageSize) > 1">
      </el-pagination>
    </div>
  </div>
</template>
<script>
import tablePanel from "@/components/common/table/table.vue";
import formPanelMore from "@/components/common/form/formPanel_more.vue";
import { searchSuspects , getWordCloud } from '../../api/api'
export default {
  components: {
    tablePanel,
    formPanelMore
  },
  data() {
    return {
      loading: false,
      counts: {
        all: 0
	    },
	    pageSize : 10,
	    pages : 1,
      /*传去formPanel_more的设置项*/
      formPanelMore: [
        {
          title: "案件信息" /*标头*/,
          ref: "jingqing",
          input_set: [
            /*里面的input设置项*/
            {
              label: "案件编号",
              type: "input",
              code: 'ajbh',
              modelData: ""
            },
            {
              label: "案件类别",
              type: "select",
              code: 'ab',
              modelData: ""
            },
            {
              label: "案发地点",
              type: "input",
              code: 'fadd',
              modelData: ""
            },
            {
              label: "案发时间",
              // type: "daterange",
              type: 'date',
              code: 'fasj',
              modelData: ""
            }  
          ]
        },
        {
          title: "刑拘信息" /*标头*/,
          ref: "qianke",
          input_set: [
            /*里面的input设置项*/
            {
              label: "是否前科",
              type: "select",
              code: 'sfqk',
              options: [
                {
                  labelselect: "是",
                  code: "1"
                },
                {
                  labelselect: "否",
                  code: "0"
                }
              ],
              modelData: ""
            },
            {
              label: "是否拘留(新政、刑事)",
              type: "select",
              code: 'sfjl',
              options: [
                {
                  labelselect: "是",
                  code: "1"
                },
                {
                  labelselect: "否",
                  code: "0"
                }
              ],
              modelData: ""
            },
            {
              label: "拘留单位",
              type: "input",
              code: 'jldw',
              modelData: ""
            },
            {
              label: "拘留时间",
              type: "daterange",
              code: 'jlsj',
              modelData: ['','']
            }
          ]
        },
        {
          title: "涉毒信息" /*标头*/,
          ref: "shedu",
          input_set: [
            /*里面的input设置项*/
            {
              label: "是否涉毒",
              type: "select",
              code: 'sfsd',
              options: [
                {
                  labelselect: "是",
                  code: "1"
                },
                {
                  labelselect: "否",
                  code: "0"
                }
              ],
              modelData: ""
            }
          ]
        },
        {
          title: "作案特点" /*标头*/,
          ref: "zuoan",
          input_set: [
            /*里面的input设置项*/
            {
              label: "作案工具",
              type: "select",
              code: 'zagj',
              options: [
                {
                  labelselect: "刀",
                  code: "dao"
                },
                {
                  labelselect: "枪",
                  code: "qiang"
                }
              ],
              modelData: ""
            },
            {
              label: "手段特点",
              type: "select",
              code: 'sdtd',
              options: [
                {
                  labelselect: "抢劫",
                  code: "qiangjie"
                },
                {
                  labelselect: "强奸",
                  code: "qiangjian"
                },
                {
                  labelselect: "偷窃",
                  code: "touqie"
                }
              ],
              modelData: ""
            },
            {
              label: "作案时机",
              type: "date",
              code: 'zasj',
              modelData: ""
            },
            {
              label: "选择部位",
              type: "select",
              code: 'xzbw',
              options: [
                {
                  labelselect: "手",
                  code: "shou"
                },
                {
                  labelselect: "脚",
                  code: "jiao"
                },
                {
                  labelselect: "身体",
                  code: "shenti"
                }
              ],
              modelData: ""
            },
            {
              label: "选择处所",
              type: "select",
              code: 'xzcs',
              options: [],
              modelData: ""
            },
            {
              label: "选择对象",
              type: "select",
              code: 'xzdx',
              options: [
                {
                  labelselect: "是",
                  code: "1"
                },
                {
                  labelselect: "否",
                  code: "0"
                }
              ],
              modelData: ""
            },
            {
              label: "选择物品",
              type: "select",
              code: 'xzwp',
              options: [
                {
                  labelselect: "是",
                  code: "1"
                },
                {
                  labelselect: "否",
                  code: "0"
                }
              ],
              modelData: ""
            }
          ]
        },
        {
          title: "人员信息",
          ref: "renyuan",
          input_set: [
            {
              label: "性别",
              type: "select",
              code: 'xb',
              options: [
                {
                  labelselect: "男",
                  code: "01"
                },
                {
                  labelselect: "女",
                  code: "02"
                }
              ]
            },
            {
              label: '户籍地址',
              type: 'input',
              code: 'hjdz'
            },
            {
              label: "年龄范围",
              code: 'nl',
              modelData: ['','']
            }
          ]
        },
        {
          title: "轨迹信息",
          ref: "guiji",
          input_set: [
            {
              label: "入住酒店",
              type: "input",
              code: 'rzjd'
            },
            {
              label: "入住时间",
              type: "daterange",
              code: 'rzsj',
              width: 470,
              modelData: ['','']
            },
            {
              label: "上网网吧",
              type: "input",
              code: 'swwb'
            },
            {
              label: "上网时间",
              type: "daterange",
              code: 'swsj',
              width: 470,
              modelData: ['','']
            },
            {
              label: "发车站点",
              type: "input",
              code: 'fczd'
            },
            {
              label: "发车日期",
              type: "daterange",
              code: 'fcrq',
              width: 470,
              modelData: ['','']
            }
          ]
        }
      ],
      //key带count和time的有排序功能
      labelList: {
        xm: '姓名',
        zjhm: '身份证号',
        hjdz: '户籍地址',
        ajmc: '案件名称',
        zagj: '作案工具',
        sdtd: '手段特点',
        za_lyt_rzjd: '入住酒店',
        za_lyt_rzsj: '入住时间',
        fczd:'发车站点',
        fcrq:'发车日期',
        netbarid: '上网网吧',
        onlinetime: '上网时间'
      },
      tableData: []
    };
  },
  created() {
    this.changeWord('AB','ab','案件类别',0,1);
    this.changeWord('ZAGJ','zagj','作案工具',3,0);
    this.changeWord('SDTD','sdtd','手段特点',3,1);
    this.changeWord('XZBW','xzbw','选择部位',3,3);
    this.changeWord('XZCS','xzcs','选择处所',3,4);
    this.changeWord('XZDX','xzdx','选择对象',3,5);
    this.changeWord('XZWP','xzwp','选择物品',3,6);
    this.changeWord('XB','xb','性别',4,0);
    this.changeWord('LG','rzjd','入住酒店',5,0);
    this.changeWord('NETBARNAME','swwb','上网网吧',5,2);
    // this.changeWord('FCZD','fczd','发车站点',5,4);
  },
  methods: {
    handlerSearch(data) {
      this.loading = true;
      // 判断入参是否改变  从而判断是否重置分页   
      if(data){
        this.paramData = data;
        this.pages = 1;
        this.pageSize = 10;
      }
      searchSuspects(
        this.paramData,
        this.pages,
        this.pageSize
      ).then(res => {
        this.loading = false;
        let resData;
        if (res.data.state === "success") {
          resData = JSON.parse(res.data.result);
          this.tableData = resData.list;
          this.counts.all = resData.totalCount;
        }
      });
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.pages = 1;
      this.handlerSearch();
    },
    handleCurrentChange(val) {
      this.pages = val;
      this.handlerSearch();
    },
    // 获取字典
    changeWord(name,code,label,indexP,index){
      getWordCloud(name).then((res) => {
        let data = {
          label : label,
          type : 'select',
          code : code,
          options : [],
          modelData : '',
        };
        let _resdata = res.data;
        _resdata.forEach((elem) => {
          data.options.push({ labelselect: elem.value , code: elem.key });
        });
        // this.formPanelMore[indexP].input_set[index] = data;
        this.formPanelMore[indexP].input_set.splice(index,1,data);
        this.formPanelMore.splice(indexP,1,this.formPanelMore[indexP]);
        // console.log(this.formPanelMore);
      })
    }
  }
};
</script>

<style lang="scss">
.person_wapper_search .form_wappers,
.count,
.table_wappers {
  width: 80%;
  min-width: 1200px;
  margin: 0 auto;
}

.person_wapper_search .form_more_wappers {
  width: 80%;
  min-width: 1227px;
  margin: 0 auto;
  /*padding: 12px;*/
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  border: solid 1px #eee;
  /*border-bottom: unset;*/
}
.person_wapper_search .form_more_wappers .forms {
  border-bottom: solid 1px #fff;
}
.person_wapper_search .count {
  margin: 12px auto;
  span {
    em {
      color: red;
    }
  }
}
.person_wapper_search .pagination {
  margin-left: 50%;
  transform: translateX(-50%);
  display: inline-block;
  margin-top: 12px;
  margin-bottom: 20px;
}
.person_wapper_search .el-form--inline .el-form-item__label {
  float: left !important;
}
</style>
